<template>
  <div class="active phoneCSS">

    <x-dialog
      v-model="showDialog"
      hide-on-blur
      :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}"
    >

      <div class="dialog_container">
        <div class="dialog_container_title">
          幸运生肖数
        </div>
        <div style="margin-top:0.3067rem;padding: 0 29px;">
          <div
            class="dialog-mas"
            v-for="item in arrazod"
            v-if="arrazod.length>0"
          >
            <span>
              <img
                style="width:1.0667rem;height:1.0667rem"
                :src="item.zon"
              />

            </span>
            <span style="font-size:0.24rem;font-weight:400;color:rgba(255,254,193,1);position: relative;top: -5px;display: block;">
              {{item.sum+"个"}}
            </span>
          </div>
          <div
            v-else
            style="color: #ffff78;font-size: 0.32rem;font-weight: 500;position: relative;top: 15%;"
          >
            暂无数据
          </div>
        </div>
        <div>

        </div>
      </div>

      <x-icon
        type="ios-close-outline"
        style="fill:#fff;"
        @click="showDialog=false"
      ></x-icon>
      </p>
    </x-dialog>

    <ex-Header
      :left-options="{backText: '',preventGoBack:true}"
      @on-click-back="goBack"
      :title="title"
      class="index-h"
    ><a
        slot="right"
        @click="goPage()"
        v-if="this.sceneId"
      >我的奖励</a></ex-Header>
    <div class="active_hearder_background"></div>
    <div class="active_content">
      <div class="active_tips">
        <flexbox
          style="text-align:center"
          v-if="actNoDetail.content"
        >
          <flexbox-item>
            <div class="active_tips_flex_left">
              <div class="active_tips_flex_left_title">活动时间</div>
              <div class="active_tips_flex_left_date">{{actNoDetail.content.date}}</div>
              <div class="active_tips_flex_left_time">{{actNoDetail.content.beginTime.split(' ')[1].substring(0,5)}}-{{actNoDetail.content.endTime.split(' ')[1].substring(0,5)}}</div>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="active_tips_flex_center">
              <div class="active_tips_flex_left_title">开奖时间</div>
              <div class="active_tips_flex_left_date">{{actNoDetail.content.lotteryTime.split(' ')[0]}}</div>
              <div class="active_tips_flex_left_time">{{actNoDetail.content.lotteryTime.split(' ')[1]}}</div>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="active_tips_flex_right">
              <div class="active_tips_flex_left_title">奖励积分</div>
              <div class="active_tips_flex_left_integral">YXT</div>
              <div style="visibility:hidden;">WLT</div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>

      <div
        class="active_result"
        v-if="actNoDetail.content && actNoDetail.content.status == 2&& actNoDetail.result"
      >
        <div class="active_introduction_content_title">开奖结果</div>
        <div class="active_introduction_content_animals">{{actNoDetail.result ? actNoDetail.result.replace(/\,/g,' '):''}}</div>
      </div>

      <div class="active_container">
        <div class="active_tabs">
          <flexbox style="text-align:center">
            <flexbox-item>
              <div
                @click="tab_hanlder(0)"
                :class="'active_tabs_left ' + (tabs_index==0 ? 'tabs_active':'')"
              >最新榜单</div>
            </flexbox-item>
            <flexbox-item style="margin-left:0.07rem">
              <div
                @click="tab_hanlder(1)"
                :class="'active_tabs_center '  + (tabs_index==1 ? 'tabs_active':'')"
              >玩法介绍</div>
            </flexbox-item>
            <flexbox-item style="margin-left:0.07rem">
              <div
                @click="tab_hanlder(2)"
                :class="'active_tabs_right '  + (tabs_index==2 ? 'tabs_active':'')"
              >我的买入</div>
            </flexbox-item>
          </flexbox>
        </div>
        <div :class='"active_ware   " + (actNoDetail.result ? "active_ware_height_bc":"") '>
          <swiper
            direction="horizontal"
            :show-dots="false"
            :show-desc-mask="false"
            dots-position="center"
            height="100%"
            v-model="tabs_index"
          >
            <swiper-item>
              <div class="active_ware_nav">
                <flexbox
                  style="height:100%;text-align:center"
                  :gutter="0"
                  justify="center"
                  align="center"
                >
                  <flexbox-item>用户</flexbox-item>
                  <flexbox-item>幸运生肖数</flexbox-item>
                  <flexbox-item>积分</flexbox-item>
                  <flexbox-item>获得奖励</flexbox-item>
                </flexbox>
              </div>
              <div class="active_ware_list">
                <div
                   :class="'active_ware_items '+ (item.uid == token.user.uid ? 'active_ware_items_more' :'')"
                  v-if="newRange.length > 0"
                  v-for="item in newRange"
                  @click="alertShow(item)"
                >
                  <flexbox
                    style="text-align:center"
                    :gutter="0"
                    justify="center"
                    align="center"
                  >
                    <flexbox-item>{{item.phone}}</flexbox-item>
                    <flexbox-item>{{item.luckyNumber}}个</flexbox-item>
                    <flexbox-item>{{item.coin}}</flexbox-item>
                    <flexbox-item v-if="actNoDetail.content && actNoDetail.content.status == 2&& actNoDetail.result">{{item.amount}}</flexbox-item>
                    <flexbox-item v-else>-</flexbox-item>
                  </flexbox>
                </div>
                <div
                  class="empty"
                  v-if="newRange.length == 0"
                >
                  <div class="emptyCont">
                    <img
                      :src="empty"
                      alt
                    >
                    <p class="emptyTxt">暂无数据</p>
                  </div>
                </div>
              </div>
            </swiper-item>
            <swiper-item>
              <div class="active_introduction">
                <flexbox
                  style="height:100%;text-align:center"
                  :gutter="0"
                  justify="center"
                  align="center"
                  orient="vertical"
                  v-if="playDtl.reward"
                >
                  <flexbox-item v-for="item in playDtl.reward">
                    <div class="active_introduction_content introCoin">
                      <div class="coin active_introduction_content_title">{{item.coin}}奖池</div>
                      <div class="amount active_introduction_content_price">{{item.amount}}个</div>
                    </div>
                  </flexbox-item>
                </flexbox>
                <div class="active_introduction_desc">{{playDtl.rule}}</div>
              </div>
            </swiper-item>
            <swiper-item>
              <div class="active_ware_nav">
                <flexbox
                  style="height:100%;text-align:center"
                  :gutter="0"
                  justify="center"
                  align="center"
                >
                  <flexbox-item>时间</flexbox-item>
                  <flexbox-item>积分</flexbox-item>
                  <flexbox-item>买入金额</flexbox-item>
                  <flexbox-item>幸运生肖数</flexbox-item>
                </flexbox>
              </div>
              <div class="active_ware_list">
                <div
                  class="active_ware_items"
                  v-if="myPurchases.length > 0"
                  v-for="item in myPurchases"
                  @click="alertDeta(item)"
                >
                  <flexbox
                    style="text-align:center"
                    :gutter="0"
                    justify="center"
                    align="center"
                  >
                    <flexbox-item>{{item.ctime}}</flexbox-item>
                    <flexbox-item>{{item.coin}}</flexbox-item>
                    <flexbox-item>{{item.money}}</flexbox-item>
                    <flexbox-item>{{item.obtainLotteryNumber}}个</flexbox-item>
                  </flexbox>

                </div>
                <div
                  class="empty"
                  v-if="myPurchases.length == 0"
                >
                  <div class="emptyCont">
                    <img
                      :src="empty"
                      alt
                    >
                    <p class="emptyTxt">暂无数据</p>
                  </div>
                </div>
              </div>
            </swiper-item>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Flexbox,
  FlexboxItem,
  Swiper,
  SwiperItem,
  Marquee,
  MarqueeItem,
  XDialog
} from "vux";
import store from "@/store/index.js";
import { mapGetters } from "vuex";
import exHeader from "@/components/xheader/index";
import empty from "@/static/images/newYearActivities/empty.png";
import { zodiacTime, activityId } from "@/api/luck";
import { goBack, goBacknav } from "@/utils/nav";

import unit_0 from "@/static/images/newYearActivities/rat.png";
import unit_1 from "@/static/images/newYearActivities/cattle.png";
import unit_2 from "@/static/images/newYearActivities/tiger.png";
import unit_3 from "@/static/images/newYearActivities/rabbit.png";
import unit_11 from "@/static/images/newYearActivities/loong.png";
import unit_4 from "@/static/images/newYearActivities/snake.png";
import unit_10 from "@/static/images/newYearActivities/horse.png";
import unit_5 from "@/static/images/newYearActivities/sheep.png";
import unit_9 from "@/static/images/newYearActivities/monkey.png";
import unit_8 from "@/static/images/newYearActivities/chicken.png";
import unit_7 from "@/static/images/newYearActivities/dog.png";
import unit_6 from "@/static/images/newYearActivities/pig.png";

import { rankingZodiacs, zodiacDetail } from "@/api/luck";

import { platform } from "@/utils/nav";
export default {
  components: {
    Flexbox,
    FlexboxItem,
    Swiper,
    SwiperItem,
    Marquee,
    MarqueeItem,
    exHeader,
    XDialog
  },
  data() {
    return {
      unit_0: unit_0,
      unit_1: unit_1,
      unit_2: unit_2,
      unit_3: unit_3,
      unit_11: unit_11,
      unit_4: unit_4,
      unit_10: unit_10,
      unit_5: unit_5,
      unit_9: unit_9,
      unit_8: unit_8,
      unit_7: unit_7,
      unit_6: unit_6,
      zodiacArray: [],
      position: [
        "鼠",
        "牛",
        "虎",
        "兔",
        "蛇",
        "羊",
        "猪",
        "狗",
        "鸡",
        "猴",
        "马",
        "龙"
      ],
      setTimeout: "",
      title: "",
      tabs_index: 0,
      sceneId: null,
      CountDown: 0,
      params1: {},
      params3: {},
      empty: empty,
      serviceTime: "",
      showDialog: false,
      arrazod: []
    };
  },

  created() {
    let query = this.$route.query;
    // if (query.activityId) {
    let activityId = parseInt(query.activityId || 91);

    this.activityId(activityId);
    this.setTimout(activityId);
    //  }
  },
  mounted() {},
  computed: {
    ...mapGetters([
      "token",
      "sceneResult",
      "actNoDetail", //场次详情
      "newRange", //最新排行
      "playDtl", //玩法介绍
      "myPurchases" //我的买入
    ])
  },
  watch: {},
  methods: {
    alertShow(item) {
      let me = this;
      let params = {
        sceneId: this.sceneId,
        coin: item.coin,
        userId: item.uid
      };
      me.arrazod = [];
      me.showDialog = true;
      rankingZodiacs(params).then(res => {
        if (res && res.zodiacs) {
          res.zodiacs.forEach(function(val) {
            if (val.zodiac) {
              let index = me.position.indexOf(val.zodiac);
              me.findeindex(index, val.stat);
            }
          });
        }
      });
    },
    alertDeta(item) {
      let me = this;
      let params = {
        quotaId: item.id
      };
      me.arrazod = [];
      me.showDialog = true;
      zodiacDetail(params).then(res => {
        if (res && res.zodiacs) {
          res.zodiacs.forEach(function(val) {
            if (val.zodiac) {
              let index = me.position.indexOf(val.zodiac);
              me.findeindex(index, val.stat);
            }
          });
        }
      });
    },
    findeindex(index, num) {
      let item;
      let me = this;
      if (index == 0) {
        item = unit_0;
      }
      if (index == 1) {
        item = unit_1;
      }
      if (index == 2) {
        item = unit_2;
      }
      if (index == 3) {
        item = unit_3;
      }
      if (index == 4) {
        item = unit_4;
      }
      if (index == 5) {
        item = unit_5;
      }
      if (index == 6) {
        item = unit_6;
      }
      if (index == 7) {
        item = unit_7;
      }
      if (index == 8) {
        item = unit_8;
      }
      if (index == 9) {
        item = unit_9;
      }
      if (index == 10) {
        item = unit_10;
      }
      if (index == 11) {
        item = unit_11;
      }
      me.arrazod.push({ zon: item, sum: num });
    },
    setTimout(activityId) {
      var me = this;
      setTimeout(() => {
        me.activityId(activityId, "time");
        me.setTimout(activityId);
      }, 60000);
    },
    activityId(activeId, type) {
      activityId(activeId).then(res => {
        if (res && res.content) {
          this.sceneId = res.content.sceneId;
          this.title = res.content.name;
          this.initData(type);
        }
      });
    },
    goBack() {
      goBacknav();
    },
    time() {
      zodiacTime().then(res => {
        if (res && res.time) {
          this.CountDown = this.diff(
            this.actNoDetail.content.lotteryTimes,
            res.time
          );
          //let m = 5;
          if (this.CountDown >= 0) {
            clearTimeout(this.setTimeout);
            this.checktime(this.CountDown);
          }
          if (res == this.actNoDetail.content.lotteryTime) {
          }
        }
      });
    },
    diff(date, date2) {
      if (platform() == "ios") {
        var date = new Date(date.replace(/-/g, "/"));
        var date2 = new Date(date2.replace(/-/g, "/"));
        return (date.getTime() - date2.getTime()) / 1000;
      } else {
        var date = new Date(date);
        var date2 = new Date(date2);
        return (date.getTime() - date2.getTime()) / 1000;
      }
    },
    checktime() {
      let me = this;
      console.log(this.CountDown);
      if (this.CountDown == 0) {
        me.$router.push({
          path: "/luckDraw",
          query: { sceneId: this.sceneId }
        });
        return;
      }
      this.setTimeout = setTimeout(function() {
        me.CountDown--;
        me.checktime();
      }, 1000);
    },
    goPage() {
      this.$router.push({ path: "/reward", query: { sceneId: this.sceneId } });
    },
    async initData(type) {
      this.params1 = {
        sceneId: this.sceneId
      };
      this.params3 = {
        ...this.params1,
        uid: this.token.user.uid
        // uid: 116577
      };
      await this.getActNoDetail(type);
    },
    getActNoDetail(type) {
      //场次详情
      store.dispatch("actNoDetailFunc", this.sceneId).then(res => {
        this.getRange(this.params1, type); //榜单
        this.time();
      });
    },
    getRange(params, type) {
      let me = this;
      if (type == "time") {
        return;
      }
      store.dispatch("newRangeFunc", params).then(list => {
        setTimeout(function() {
          me.getRange(params, "this");
        }, 10000);
        if (type == "this") {
          return;
        }
        this.getPlayDtl(this.params1, type); //玩法介绍
      });
    },
    getPlayDtl(params, type) {
      store.dispatch("playDtl", params).then(() => {
        this.getPurchases(this.params3, type); //我的买入
      });
    },
    getPurchases(params, type) {
      store.dispatch("myPurchasesFunc", params).then(list => {});
    },
    tab_hanlder(index) {
      this.tabs_index = index;
    }
  }
};
</script>
<style lang="scss">
@media screen and (min-width: 1200px) {
  .index-h {
    .left-arrow {
      display: none;
    }
    .vux-header-right {
      cursor: pointer;
    }
  }
  .vux-flexbox-item {
    cursor: pointer;
  }
  .active_ware_list .active_ware_items {
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
.active {
  min-height: 100vh;
  // height: 100%;
  background-image: url(../../../static/images/newYearActivities/knhdBg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .active_hearder_background {
    height: 6.76rem;
    background-image: url(../../../static/images/newYearActivities/kinbg.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .dialog_container_title {
    font-size: 0.3467rem;
    font-weight: 500;
    color: rgba(255, 239, 109, 1);
    margin-top: 1.08rem;
  }
  .dialog-mas {
    display: inline-block;
    width: 1.3333rem;
  }
  .active_ware_items_more {
    font-size: 0.2667rem !important;
    font-weight: 800 !important;;
    color: rgba(255, 255, 120, 1) !important;;
  }
  .active_content {
    width: 9.2rem;
    margin: auto;
    position: relative;
    top: -2.1rem;
    height: calc(100vh - 7.5rem - 1.2933rem);
  }
  .active_tips {
    height: 2.4rem;
    width: 100%;
    background-image: url(../../../static/images/newYearActivities/knhd_time_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: auto;
  }
  .dialog_container {
    height: 6.4rem;
    width: 7.7333rem;
    margin: 2rem auto 0;
    background-image: url(../../../static/images/newYearActivities/dialogBc.png);
    background-size: 100% 100%;
    border: 1px solid black;
  }
  .vux-swiper-item {
    overflow: auto;
  }
  .active_tips_flex_left {
    font-size: 0.2667rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 0.4rem 0;
  }
  .active_tips_flex_center {
    font-size: 0.2667rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 0.4rem 0;
  }
  .active_tips_flex_right {
    font-size: 0.2667rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 0.4rem 0;
  }
  .active_tips_flex_left_title {
    font-size: 0.2667rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 1);
  }
  .active_tips_flex_left_date,
  .active_tips_flex_left_integral {
    margin: 0.2667rem 0 0;
  }
  .active_result {
    /* 开奖结果 */
    background-image: url(../../../static/images/newYearActivities/active_content_in.png);
    background-size: 100% 100%;
    width: 9.2rem;
    height: 0.5333rem;
    padding: 0.32rem 0;
    // padding: 0.4667rem 0;
    margin: 0.36rem auto 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .active_introduction_content_title {
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      font-size: 0.2667rem;
    }
    .active_introduction_content_animals {
      margin-left: 0.64rem;
      font-weight: 800;
      color: rgba(255, 255, 120, 1);
      font-size: 0.4rem;
    }
  }
  .active_container {
    margin-top: 0.2667rem;
    height: calc(100vh - 7.3rem - 2.6rem - 0.2667rem);
  }
  .active_tabs_left {
    width: 3.04rem;
    height: 0.6667rem;
    font-size: 0.2667rem;
    line-height: 0.6667rem;
    border-radius: 0.1333rem 0.1333rem 0px 0px;
    color: rgba(209, 24, 24, 1);
    background-color: rgba(132, 13, 13, 1);
    font-size: 0.2667rem;
  }
  .active_tabs_center {
    width: 3.04rem;
    height: 0.6667rem;
    line-height: 0.6667rem;
    font-size: 0.2667rem;
    border-radius: 0.1333rem 0.1333rem 0px 0px;
    background-color: rgba(132, 13, 13, 1);
    color: rgba(209, 24, 24, 1);
    font-size: 0.2667rem;
  }
  .active_tabs_right {
    width: 3.04rem;
    height: 0.6667rem;
    line-height: 0.6667rem;
    font-size: 0.2667rem;
    border-radius: 0.1333rem 0.1333rem 0px 0px;
    background-color: rgba(132, 13, 13, 1);
    color: rgba(209, 24, 24, 1);
    font-size: 0.2667rem;
  }
  .tabs_active {
    background-color: rgba(132, 13, 13, 0.5);
    font-weight: 500;
    color: rgba(255, 255, 120, 1);
    font-size: 0.32rem;
  }
  .active_ware {
    // height: calc(100% - 0.2667rem);
    height: 100%;
    background-color: rgba(132, 13, 13, 0.5);
  }
  .active_ware_height_bc {
    height: 87% !important;
  }
  .active_ware_nav {
    height: 0.8rem;
    width: 8.8533rem;
    background-image: url(../../../static/images/newYearActivities/knhd_newlist_title_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 0.2667rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    font-size: 0.2667rem;
  }
  .vux-slider {
    height: 100%;
  }
  .active_ware_list {
    width: 8.8533rem;
    margin: auto;
  }
  .active_ware_items {
    font-size: 0.2667rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    padding: 0.4rem 0px;
  }
  .empty {
    width: 100%;
    text-align: center;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    .emptyCont {
      img {
        width: 2.1333rem;
        margin-top: 2rem;
      }
    }
    .emptyTxt {
      color: #ffff78;
      font-size: 0.32rem;
      font-weight: 500;
      margin-top: 0.3733rem;
    }
  }

  .active_introduction_content {
    // background-image: url(../../../static/images/newYearActivities/active_content_in.png);
    background-image: url(../../../static/images/newYearActivities/playIntroRewardBg.png);
    background-size: 100% 100%;
    // height: 1.9067rem;
    // width: 4.1733rem;
    padding: 0.4667rem 0 0;
    margin: 0.36rem auto 0;
  }
  .introCoin {
    display: flex;
    flex-direction: row;
    width: 8.5867rem;
    height: 1.04rem;
    line-height: 0.5rem;
    justify-content: space-around;
    font-size: 0.4rem;
    .active_introduction_content_title {
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      font-size: 0.2667rem;
    }
    .active_introduction_content_price {
      font-weight: 800;
      color: rgba(255, 255, 120, 1);
      font-size: 0.4rem;
    }
  }

  .active_introduction_desc {
    width: 8.2667rem;
    font-size: 0.2667rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 0.8rem;
    margin: auto;
  }
}
</style>
